<template>
  <div class="app-container">
    <el-card>
      <!-- 表单区域 -->
      <el-form ref="dataForm" :model="temp" :rules="rules" label-position="left" label-width="90px">
        <el-form-item label="文章标题" prop="title">
          <el-input v-model.trim="temp.title" />
        </el-form-item>
        <el-form-item label="分类">
          <el-select v-model="temp.tagId" placeholder="请选择">
            <el-option v-for="item in tags" :key="item.id" :label="item.name" :value="item.code" />
          </el-select>
        </el-form-item>
        <el-form-item label="来源">
          <el-input v-model.trim="temp.source" />
        </el-form-item>
        <el-form-item label="作者">
          <el-input v-model.trim="temp.author" />
        </el-form-item>
        <el-form-item label="发布状态">
          <el-radio-group v-model="temp.status">
            <el-radio v-for="item in publishStatusList" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="缩略图">
          <single-image v-model="temp.imageUrl" />
        </el-form-item>
        <el-form-item label="内容">
          <Tinymce ref="editor" v-model="temp.content" :height="400" />
        </el-form-item>
      </el-form>
      <!-- 按钮区域 -->
      <div class="submit-footer">
        <el-button type="primary" @click="isEdit ? updateData('dataForm') : createData('dataForm')">提 交</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import Tinymce from '@/components/Tinymce'
import SingleImage from '@/components/Upload/SingleImage'
import { addList, getOneArticle, updateList } from '@/api/content/list'
import { getSelectTags } from '@/api/content/tags'
import { publishStatusList } from '@/utils'

export default {
  name: 'ArticleDetail',
  components: { Tinymce, SingleImage },
  props: {
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      temp: {
        title: undefined,
        tagId: undefined,
        source: undefined,
        author: undefined,
        content: undefined,
        status: '0',
        index: undefined,
        imageUrl: undefined
      },
      rules: {},
      tags: [],
      publishStatusList: publishStatusList
    }
  },
  async created() {
    this.getTags()
    if (this.isEdit) {
      const { id, index } = this.$route.params
      const { data } = await getOneArticle(id)
      this.temp = data
      this.temp.index = index
    }
  },
  methods: {
    async getTags() {
      try {
        const { data } = await getSelectTags('TAG_ID')
        this.tags = data
      } catch (error) {
        console.log(error)
      }
    },
    createData(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          try {
            const { message } = await addList(this.temp)
            this.$message({
              message: message,
              type: 'success',
              duration: 300,
              onClose: () => {
                this.backPage()
              }
            })
          } catch (error) {
            console.log(error)
          }
        }
      })
    },
    updateData(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          try {
            const { message } = await updateList(this.temp)
            this.dialogFormVisible = false
            this.$message({
              message: message,
              type: 'success',
              duration: 300,
              onClose: () => {
                this.backPage()
              }
            })
          } catch (error) {
            console.log(error)
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped></style>
